<template>
    <el-dialog title="跟投分配方案" :visible.sync="show" width="70%" @close="$emit('update:visible', false)">
        <el-table :data="distributionDetailList" border
                  :span-method="objectSpanMethod" highlight-current-row
                  :summary-method="getSummaries"
                  show-summary
        >
            <el-table-column type="index" prop="type" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="占比" prop="businessProportion" align="center">
                <template slot-scope="scope">{{scope.row.businessProportion?(scope.row.businessProportion+'%'):'-'}}
                </template>
            </el-table-column>
            <el-table-column label="业务线" prop="businessName" align="center"></el-table-column>
            <el-table-column label="比例" prop="departmentProportion" align="center">
                <template slot-scope="scope">
                    {{scope.row.departmentProportion?(scope.row.departmentProportion+'%'):'-'}}
                </template>
            </el-table-column>
            <el-table-column label="部门" prop="departmentName" align="center">
                <template slot-scope="scope">
                    {{scope.row.departmentName?scope.row.departmentName:'-'}}
                </template>
            </el-table-column>
            <el-table-column label="职级" prop="rankName" align="center">
                <template slot-scope="scope">
                    {{scope.row.rankName?scope.row.rankName:'-'}}
                </template>
            </el-table-column>
            <el-table-column label="比例" prop="rankProportion" align="center">
                <template slot-scope="scope">{{scope.row.rankProportion?(scope.row.rankProportion+'%'):'-'}}</template>
            </el-table-column>
            <el-table-column label="绝对值" prop="rankMagnitude" align="center">
                <template slot-scope="scope">{{scope.row.rankMagnitude?(scope.row.rankMagnitude+'%'):'-'}}</template>
            </el-table-column>
        </el-table>
        <template slot="footer">
            <el-button @click="show = false">关 闭</el-button>
        </template>
    </el-dialog>
</template>
<script>


    export default {
        components: {},
        data() {
            return {
                distributionDetailList: [],
                spanArr: [],//二维数组，用于存放单元格合并规则
                position: 0,//用于存储相同项的开始index
                show: false,
            }
        },
        props: ["tableData", "visible"],
        watch: {
            visible(o, n) {
                this.show = o;
                this.getinfodata();
            },
        },
        methods: {
            initinterval(row, column, cellValue, index) {
                let str = ''
                if (!row.profitBegin) {
                    str = '≤' + row.profitEnd
                } else if (row.profitBegin && row.profitEnd) {
                    str = row.profitBegin + '(含) -' + row.profitEnd + '(不含）'
                } else if (!row.profitEnd) {
                    str = '≥' + row.profitBegin
                }
                return str
            },
            //表格单元格合并
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                for (let i = 1; i < 5; i++) {
                    if (columnIndex === i) {
                        const _row = this.spanArr[i][rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
                        return {
                            rowspan: _row,
                            colspan: _col
                        }
                    }
                }
            },
            getSummaries(param) {
                return ["合计", , , , , , , '100%'];
            },
            compare(prop) {
                return function (a, b) {
                    let value1 = a[prop]
                    let value2 = b[prop]
                    return value1 - value2
                }
            },
            getinfodata() {
                this.distributionDetailList = this.tableData;

                for (let j in  this.distributionDetailList) {
                    let orderNum = this.distributionDetailList[j]['departmentId'] + '' + this.distributionDetailList[j]['businessId']
                    this.$set(this.distributionDetailList[j], 'order', orderNum)
                }
                this.distributionDetailList.sort(this.compare('order'))


                this.rowspan(1, 'businessId')
                this.rowspan(2, 'businessId')
                this.rowspan(3, 'order')
                this.rowspan(4, 'order')
            },
            rowspan(idx, prop) {
                this.spanArr[idx] = [];
                this.position = 0;
                let len = 0;
                this.distributionDetailList.forEach((item, index) => {
                    if (index === 0) {
                        this.spanArr[idx].push(1);
                        this.position = 0;
                    } else {
                        if (this.distributionDetailList[index][prop] === this.distributionDetailList[index - 1][prop]) {
                            this.spanArr[idx][this.position] += 1;//有相同项
                            this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0

                        } else {
                            this.spanArr[idx].push(1);//同列的前后两行单元格不相同
                            this.position = index;
                        }
                    }
                })
            },
        },

        created() {

        },
        destroyed() {

        },
        filters: {}
    }

</script>

<style lang="stylus" scoped>

</style>
